<template>
  <div class="menu">
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
      @select="select"
    >
      <template v-for="(item, index) in menuList" :key="item.id || index">
        <subSideMenu
          v-if="item.children && item.children.length > 0"
          :menuInfo="item"
          :key="item.key"
        ></subSideMenu>
        <a-menu-item v-else :key="item.id" @click="goto(item)">
          <template #icon>
            <img class="menu-img" v-if="item.iconUrl" :src="item.iconUrl" alt="" />
            <img
              class="menu-img"
              v-else-if="item.iconName"
              :src="require(`@/assets/images/${item.iconName}`)"
              alt="tutu"
            />
          </template>
          <span>{{ item.name }}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>

<script>
import subSideMenu from "./subSideMenu";
import { reactive, toRefs, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "SideMenu",
  components: {
    subSideMenu,
  },

  setup() {
    const route = useRoute();
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
      preOpenKeys: [],
      menuList: [
        {
          id: "2",
          name: "垂直马拉松剪辑",
          children: [
            {
              id: "2-1",
              name: "视频识别",
              url: "/understand/list",
              iconUrl: "",
            },
            {
              id: "2-2",
              name: "号码录入",
              url: "/numberEntry/list",
              iconUrl: "",
            },
            {
              id: "2-3",
              name: "分组管理",
              url: "/group/list",
              iconUrl: "",
            },
          ],
        },
        {
          id: "1",
          name: "视频内容理解",
          children: [
            {
              id: "1-1",
              name: "视频理解",
              url: "/video/list",
              iconUrl: "",
            },
          ],
        },
      ],
    });
    const findPathId = (path) => {
      for (let i = 0; i < state.menuList.length; i++) {
        let child = state.menuList[i].children.find((v) => v.url === path);
        if (child) {
          return {
            id: child.id,
            pid: state.menuList[i].id,
          };
        }
      }
    };
    const setSelect = () => {
      let {
        path = "",
        meta: { parentRoute = "" },
      } = route;
      path = parentRoute ? parentRoute : path;
      let pathInId = findPathId(path);
      state.selectedKeys = [pathInId?.id];
      state.openKeys = [pathInId?.pid];
    };
    watch(
      () => state.openKeys,
      (_val, oldVal) => {
        state.preOpenKeys = oldVal;
      }
    );
    watch(
      () => route.path,
      () => {
        setSelect();
      }
    );

    const router = useRouter();
    const goto = (item) => {
      if (item.url) {
        router.push(item.url);
      }
    };

    const select = (SubMenu) => {
      console.log(SubMenu);
    };
    onMounted(() => {
      setSelect();
    });

    return {
      ...toRefs(state),
      select,
      goto,
    };
  },
};
</script>
<style lang="scss" scoped>
.menu {
  overflow: auto;
  height: 100%;
  &-img {
    height: 14px;
  }
}
</style>
